<template>
	<view>
		<page-header :team-id="teamId" :disabled="false">
			<view class="cat2bug-view">
				<view class="defect-title-flag">
					<defect-type-flag :defect="defect" class="flag"></defect-type-flag>
					<defect-state-flag :defect="defect" class="flag"></defect-state-flag>
				</view>
				<text class="defect-title">#{{defect.projectNum}} {{defect.defectName}}</text>
			</view>
		</page-header>
		<page-body>
			<template v-slot:content>
				<uni-collapse ref="collapse" :accordion="false" v-model="collapseStates" @change="handleCollapseStateChange">
					<uni-collapse-item>
						<template v-slot:title>
							<uni-section :title="$t('describe')" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<view class="defect-item">
							<text>{{text(defect.defectDescribe)}}</text>
						</view>
					</uni-collapse-item>
					<uni-collapse-item>
						<template v-slot:title>
							<uni-section :title="$t('defect.base-info')" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<view class="col">
							<view class="row">
								<text class="cat2bug-label160">{{$t('project')}}</text>
								<text class="cat2bug-text">{{defect.projectName}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('module')}}</text>
								<text class="cat2bug-text">{{defect.moduleName||''}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('version')}}</text>
								<text class="cat2bug-text">{{defect.moduleVersion||''}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('state')}}</text>
								<text class="cat2bug-text">{{$t(defect.defectStateName)}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('plan-start-time')}}</text>
								<text class="cat2bug-text">{{$t(defect.planStartTime)}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('plan-end-time')}}</text>
								<text class="cat2bug-text">{{$t(defect.planEndTime)}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('defect.life-time')}}</text>
								<text class="cat2bug-text">{{defectLife(defect)}}</text>
							</view>
							<view class="row">
								<text class="cat2bug-label160">{{$t('reject')}}</text>
								<text class="cat2bug-text">{{defect.rejectCount}}</text>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item v-if="defect.imgUrls">
						<template v-slot:title>
							<uni-section :title="$t('image')+'('+getUrl(defect.imgUrls).length+')'" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<view class="defect-item">
							<preview-image show-type="list" :image-urls="getUrl(defect.imgUrls)"></preview-image>
						</view>
					</uni-collapse-item>
					<uni-collapse-item v-if="defect.annexUrls">
						<template v-slot:title>
							<uni-section :title="$t('annex')+'('+getUrl(defect.annexUrls).length+')'" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<view class="defect-item row list" v-for="(file, fileIndex) in getUrl(defect.annexUrls)" :key="fileIndex">
							<uni-icons type="paperclip" size="15"></uni-icons>
							<uni-link color="#007BFF" :href="file" :text="file"></uni-link>
						</view>	
					</uni-collapse-item>
					<uni-collapse-item v-if="testCase && testCase.caseId">
						<template v-slot:title>
							<uni-section :title="caseTitle" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<view class="defect-item">
							<case-card :test-case="testCase" :step-index="defect.caseStepId"></case-card>
						</view>	
					</uni-collapse-item>
					<uni-collapse-item>
						<template v-slot:title>
							<uni-section :title="$t('log')" type="line" class="cat2bug-section-header"></uni-section>
						</template>
						<defect-log :defect="defect" @load="handleDefectLogLoaded"></defect-log>
					</uni-collapse-item>
				</uni-collapse>
				<!-- <view class="voicepad">  
					{{voiceState}}  
				</view>  
				<button class="cu-btn  bg-green voicebtn " @touchstart="touchStart" @touchend="touchEnd"></button> -->
			</template>
		</page-body>
		<defect-tools show-type="fab" v-model="defect"></defect-tools>
	</view>
</template>

<script>
	import PreviewImage from '@/components/preview-image/index.vue'
	import DefectLog from '@/subpackage/components/defect/defect-log/index.vue'
	import DefectTypeFlag from '@/components/defect/defect-type-flag/index.vue'
	import DefectStateFlag from '@/components/defect/defect-state-flag/index.vue'
	import CaseCard from '@/components/case/case-card/index.vue'
	import DefectTools from '@/components/defect/defect-tools/index.vue'
	import config from '@/config'
	import { getDefect } from "@/api/system/defect.js"
	import { getCase } from "@/api/system/case.js"
	import {lifeTime} from "@/utils/defect";
	
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()
	
	/** 保存到本地缓存缺陷详情折叠面板状态的Key */
	const DEFECT_DETAIL_COLLAPSE_STATE_KEY = 'defect-detail-collapse-state';
	
	export default {
		name: 'DefectDetail',
		components: { PreviewImage, DefectLog, DefectTypeFlag, DefectStateFlag, DefectTools, CaseCard },
		data() {
			return {
				// 是否显示折叠面板的状态开关
				collapseStates: ['3'],
				// 缺陷详情
				defect: {},
				// 测试用例
				testCase: {},
				voiceState: "你可以这样说...",
			}
		},
		onLoad(option) {
			this.getDefectDetail(option.defectId);
			this.initRecord();  
		},
		onShow() {
			// 读取本地折叠面板的状态
			const self = this;
			uni.getStorage({
				key: DEFECT_DETAIL_COLLAPSE_STATE_KEY,
				success: function (res) {
					if(res.data) {
						self.collapseStates = res.data;
						self.$nextTick(() => {
							self.$refs.collapse.resize();
						});
					}
				}
			});
			
		},
		computed: {
			/** 当前团队ID */
			teamId() {
			    return this.$store.state.user.config.currentTeamId;
			},
			/** 缺陷存活时间 */
			defectLife: function () {
			  return function (defect) {
				return lifeTime(defect);
			  }
			},
			/** 获取路径 */
			getUrl: function () {
			  return function (urls){
				return urls?urls.split(',').map(m=>config.baseUrl + m):[];
			  }
			},
			/** 测试用例标题 */
			caseTitle: function() {
				let title = this.$i18n.t('case');
				if(this.testCase && this.testCase.caseStep && this.testCase.caseStep.length>0) {
					title+='('+(this.defect.caseStepIndex||0)+'/'+(this.testCase.caseStep.length||0)+')'
				} 
				return title;
			},
			text: function() {
				return function(val) {
					return val?val+'':this.$i18n.t('empty');
				}
			}
		},
		methods: {
			// 获取用例
			getCaseDetail(caseId) {
			  if(caseId) {
				getCase(caseId).then(res=>{
				  this.testCase = res.data;
				})
			  } else {
				this.testCase = {};
			  }
			},
			// 获取缺陷
			getDefectDetail(defectId) {
				getDefect(defectId).then(res=>{
					this.defect = res.data;
					if(this.defect && this.defect.caseId){
					  this.getCaseDetail(this.defect.caseId);
					}
				})
			},
			/** 处理缺陷日志加载完成 */
			handleDefectLogLoaded() {
				// 刷新日志面板展开，通过切换开关刷新
				this.$nextTick(() => {
					this.$refs.collapse.resize();
				});
			},
			/** 处理动态面板状态改变 */
			handleCollapseStateChange() {
				const self = this;
				this.$nextTick(()=>{
					uni.setStorage({
						key: DEFECT_DETAIL_COLLAPSE_STATE_KEY,
						data: self.collapseStates,
						success: function (res) {
							uni.getStorage({
								key: DEFECT_DETAIL_COLLAPSE_STATE_KEY,
								success: function (res) {
								}
							});
						}
					});
				});
			},
			touchStart() {   
				manager.start({  
					duration: 60000,  
					lang: "zh_CN"  
				})
			},
			touchEnd: function() {  
				uni.showToast()  
				manager.stop();  
			},
			initRecord: function() {  
				manager.onStart = function(res) {  
					console.log('start',res.msg)
					this.voiceState ="onStart:"+ res.msg+"正在录音"  
				};  
				//有新的识别内容返回，则会调用此事件  
				manager.onRecognize = (res) => {  
					console.log(res.result)
					this.voiceState = res.result;  
				}  

				// 识别结束事件  
				manager.onStop = (res) => {  
					console.log('stop',res.result)
					this.voiceState = res.result;  
				}  

				// 识别错误事件  
				manager.onError = (res) => {  
					console.log('error',res.msg)
					this.voiceState = res.msg;  

				}  
			}, 
		}
	}
</script>

<style lang="scss" scoped>
	.defect-title {
		font-size: 1.1rem;
		font-weight: 500;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-line;
	}
	.defect-title-flag {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap; 
		gap: 10rpx; 
		justify-content: flex-start; 
		align-items: flex-end;
		height: 100%;
	}
	@media (min-height: 180rpx) {
		.defect-title-flag {
			flex-direction: column;
			align-items: center;
		}
	}
	::v-deep .uni-forms-item, .defect-item {
		padding: 0 40rpx;
	}
	.defect-item {
		margin-bottom: 20rpx;
		::v-deep .uni-link {
			word-break: break-word;
		}
	}
	.defect-form-text {
		height: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.voicebtn{height:130upx;display: block;width:130upx;line-height:130upx;border-radius: 65upx;font-size: 50upx;position: absolute;top:1060upx;left:310upx;}  
	.voicepad{height: 250upx;width:680upx;background: #fff;margin: 30upx auto;border-radius: 8upx;color: #CCCCCC;padding:20upx;font-size: 35upx;}  
</style>